<template>
  <div style="display: flex; flex-wrap: wrap; gap: 100px">
    <div>
      <p>第一题</p>
      <input type="button" value="弹窗" @click="onebtn" />
    </div>
    <div>
      <p>第二题</p>
      <input type="text" v-model="two" /><br />
      {{ two }}
    </div>
    <div>
      <p>第三题</p>
      <form>
        用户名: <input type="text" v-model="three.user" /><br />
        密码:<input type="text" v-model="three.pwd" />
        <input type="button" value="提交" @click="tsub" />
      </form>
    </div>
    <div>
      <p>第四题</p>
      <input
        :class="{ four }"
        type="button"
        value="切换背景色"
        @mousemove="four = true"
        @mouseleave="four = false"
      />
    </div>
    <div>
      <p>第五题</p>
      <input @keyup.enter="fivefn" type="text" v-model="fiveo" /><br />
      <p>{{ fivet }}</p>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue'

//第一题
function onebtn() {
  alert('按钮被点击了')
}
//第二题
let two = ref('')
//第三题
let three = reactive({
  user: '',
  pwd: '',
})
function tsub() {
  if (!three.user) {
    alert('用户名为空')
  } else if (!three.pwd) {
    alert('密码为空')
  } else {
    three.user = ''
    three.pwd = ''
  }
}
//第四题
let four = ref(false)
//第五题
let fiveo = ref('')
let fivet = ref('')
function fivefn() {
  fivet.value = fiveo.value
  fiveo.value = ''
}
</script>
<style>
.four {
  background-color: red;
}
</style>
